// pages/detail-search/index.js
import debounce from "../../utils/debounce"  // 防抖
import { getSearchHot, getSearchSuggest, getSearchResult } from '../../service/api_search'

const debounceGetSearchSuggest = debounce(getSearchSuggest, 100)

Page({
  data: {
    keyHots: [],    // 热门搜索
    searchValue: '',  //搜索词
    suggests: [],  // 搜索建议
    suggestsNodes: [],  // 富文本渲染
    searchResult: [],    // 搜索结果
    type: "1"    // 显示的内容 1、热搜建议 2、搜索建议  3、搜索结果
  },
  onLoad(options) {
    this.getPageData()
  },
  // 获取页面数据
  getPageData() {
    getSearchHot().then(res => {
      this.setData({ keyHots: res.data.result.hots })
    })
  },
  // 响应搜索框改变
  handleSearchChange(event) {
    // 页面的改变获取到关键词
    const searchValue = event.detail
    this.setData({ searchValue })
    this.setData({ type: "2" })
    if (!searchValue.length) {
      this.setData({ type: "1" })
      this.setData({ suggests: [] })
      return
    }
    // 根据关键词发送网络请求 经过防抖处理
    debounceGetSearchSuggest(searchValue).then(res => {
      const suggests = res.data.result.allMatch
      this.setData({ suggests })
      const suggestsNodes = []
      // 转化成node节点 当有搜索建议时候 执行
      if (suggests) {
        const suggestsKeywords = suggests.map(itme => itme.keyword)
        for (const ketword of suggestsKeywords) {
          const node = []
          // 判断 搜索建议前几位字符是否与 搜索词相同
          if (ketword.toUpperCase().startsWith(searchValue.toUpperCase())) {
            // 分解 搜索建议 高亮匹配的关键词
            const key1 = ketword.slice(0, searchValue.length)
            const node1 = {
              name: "span",
              attrs: { style: "color:#26ce8a" },
              children: [{ type: "text", text: key1 }]
            }
            node.push(node1)
            const key2 = ketword.slice(searchValue.length)
            const node2 = {
              name: "span",
              attrs: { style: "color:#000000" },
              children: [{ type: "text", text: key2 }]
            }
            node.push(node2)
          } else {
            const nodeInfo = {
              name: "span",
              attrs: { style: "color:#000000" },
              children: [{ type: "text", text: ketword }]
            }
            node.push(nodeInfo)
          }
          suggestsNodes.push(node)
        }
      }
      this.setData({ suggestsNodes })
    })
  },
  // 按下回车 搜索
  handleSearchResult() {
    const searchValue = this.data.searchValue
    this.setData({ searchValue })
    this.setData({ type: "3" })
    getSearchResult(searchValue).then(res => {
      const searchResult = res.data.result.songs.filter(item => {
        return item.fee != "1"
      })
      this.setData({ searchResult })
    })
  },
  // 点击热搜 搜索
  handleHotItemClick(event) {
    const searchValue = event.currentTarget.dataset.name
    this.setData({ searchValue })
    this.setData({ type: "3" })
    getSearchResult(searchValue).then(res => {
      const searchResult = res.data.result.songs.filter(item => {
        return item.fee != "1"
      })
      this.setData({ searchResult })
    })
  },
  // 点击搜索建议 搜索
  handlesuggestItemClick(event) {
    const index = event.currentTarget.dataset.index
    const searchValue = this.data.suggests[index].keyword
    this.setData({ searchValue })
    this.setData({ type: "3" })
    getSearchResult(searchValue).then(res => {
      const searchResult = res.data.result.songs.filter(item => {
        return item.fee != "1"
      })
      this.setData({ searchResult })
    })
  },
  // 跳转音乐播放界面 
  handleSongClick(event) {
    const id = event.currentTarget.dataset.id
    console.log(id);
  },
})